<template>
  <div class="editor">
    <el-scrollbar height="100vh">
      <!-- 文章标题 -->
      <div class="title">
        <el-input v-model="input" placeholder="输入标题" />
        <el-input v-model="input1" placeholder="分类" />
      </div>
      <ckeditor
        :editor="editor"
        v-model="editorData"
        :config="editorConfig"
      ></ckeditor>
      <div class="btn">
        <el-button @click="handleSend">{{ btn }}</el-button>
      </div>
      <div v-html="editorData" class="ck-content SSR"></div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import CkEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor"; // 引入编辑器
import ParagraphPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraph"; // 引入段落插件
import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials"; // 基本功能插件

import BoldPlugin from "@ckeditor/ckeditor5-basic-styles/src/bold"; // 加粗插件
import ItalicPlugin from "@ckeditor/ckeditor5-basic-styles/src/italic"; // 斜体插件
import StrikethroughPlugin from "@ckeditor/ckeditor5-basic-styles/src/strikethrough"; // 删除线插件
import UnderlinePlugin from "@ckeditor/ckeditor5-basic-styles/src/underline"; // 下划线插件
import SuperscriptPlugin from "@ckeditor/ckeditor5-basic-styles/src/superscript"; // 上标插件
import SubscriptPlugin from "@ckeditor/ckeditor5-basic-styles/src/subscript"; // 下标插件
import CodePlugin from "@ckeditor/ckeditor5-basic-styles/src/code"; // 行内代码插件
import HeadingPlugin from "@ckeditor/ckeditor5-heading/src/heading"; // P H1~H6
import HeadingButtonsUIPlugin from "@ckeditor/ckeditor5-heading/src/headingbuttonsui";
import ParagraphButtonUIPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui";

import "@ckeditor/ckeditor5-basic-styles/build/translations/zh-cn"; // 简体中文
import "ckeditor5/build/translations/zh-cn"; // 中文包

import LinkImagePlugin from "@ckeditor/ckeditor5-link/src/linkimage"; // 图像链接插件

import ImagePlugin from "@ckeditor/ckeditor5-image/src/image"; // 图像插件
import ImageToolbarPlugin from "@ckeditor/ckeditor5-image/src/imagetoolbar"; // 图像工具栏插件
import ImageTextAlterNativePlugin from "@ckeditor/ckeditor5-image/src/imagetextalternative"; // 文本替换图像插件
import ImageCaptionPlugin from "@ckeditor/ckeditor5-image/src/imagecaption"; // 图像标题插件
import ImageInsertPlugin from "@ckeditor/ckeditor5-image/src/imageinsert"; // 插入图像插件
import AutoImagePlugin from "@ckeditor/ckeditor5-image/src/autoimage"; // 自动图像插件
import ImageResizePlugin from "@ckeditor/ckeditor5-image/src/imageresize"; // 调整图像尺寸插件
import "@ckeditor/ckeditor5-image/build/translations/zh-cn"; // 图像插件中文简体语言包

import IndentPlugin from "@ckeditor/ckeditor5-indent/src/indent"; // 缩进插件（列表）
import IndentBlockPlugin from "@ckeditor/ckeditor5-indent/src/indentblock"; // 缩进插件（块：段落，标题）
import "@ckeditor/ckeditor5-indent/build/translations/zh-cn"; // 块缩进中文包

import CodeBlockPlugin from "@ckeditor/ckeditor5-code-block/src/codeblock"; // 代码块插件
import "@ckeditor/ckeditor5-code-block/build/translations/zh-cn"; // 代码块插件中文简体他语言包

import FindAndReplace from "@ckeditor/ckeditor5-find-and-replace/src/findandreplace"; // 查找替换插件
import "@ckeditor/ckeditor5-find-and-replace/build/translations/zh-cn"; // 查找替换插件中文简体语言包

import Font from "@ckeditor/ckeditor5-font/src/font";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter";

import { reactive, toRefs, shallowRef, ref, defineProps, onMounted } from "vue";

import axios from "axios";

import URL from '@/api/url'
import {useHomeStore} from '@/stores/home.js'
import fn from '@/tools/timer.js'
const useStore = useHomeStore()
const props = defineProps({
  //子组件接收父组件传递过来的值
  btn: {
    type: String,
    default: "发表文章",
  },
  Info:Object
});
//使用父组件传递过来的值
const { btn } = toRefs(props);
function check(){
  axios.get( URL()+'/article/checkArticle').then(item=>{
        if(item.data.code === 20000){
          // console.log(item);
            item.data.data.forEach(element => {
              element.createdAt = fn(element.createdAt)
            });
            useStore.article = item.data.data.sort((a,b)=>{
              return new Date(b.createdAt)-new Date(a.createdAt)
            })
            // useStore.article = data.articleInfo
            console.log(useStore.article);
        }
    })
}
onMounted(() => {
  // console.log(props.btn);
  if (props.btn === "修改文章") {
    data.input = props.Info.title;
    data.input1 = props.Info.classify;
    data.editorData = props.Info.content;
  }
});

const data = reactive({
  input: "",
  input1: "",
  editor: ClassicEditor,
  editorData: "",
  editorConfig: {
    language: "zh-cn", // 中文包
    plugins: [
      ParagraphPlugin, // 段落插件
      EssentialsPlugin, // 基本功能插件

      BoldPlugin, // 加粗
      ItalicPlugin, // 斜体
      StrikethroughPlugin, // 删除线
      UnderlinePlugin, // 下划线
      SuperscriptPlugin, // 上标
      SubscriptPlugin, // 下标
      CodePlugin, // 行内代码f
      Font,
      ImagePlugin, // 图像插件
      ImageTextAlterNativePlugin, // 文本替换图像插件
      ImageCaptionPlugin, // 图像标题插件
      ImageInsertPlugin, // 插入图像插件
      AutoImagePlugin, // 自动图像插件
      LinkImagePlugin, // 图像链接插件
      ImageToolbarPlugin, // 图像工具栏插件
      ImageResizePlugin, // 调整图像尺寸插件

      IndentPlugin, // 缩进插件（列表）
      IndentBlockPlugin, // 缩进插件（块：段落，标题）
      CodeBlockPlugin, // 代码块插件
      FindAndReplace, // 查找替换插件
      HeadingPlugin,
      HeadingButtonsUIPlugin,
      ParagraphButtonUIPlugin,
      SimpleUploadAdapter,
    ],
    codeBlock: {
      indentSequence: "  ", // 代码缩进字符，false：禁用代码缩进功能
      languages: [
        { language: "html", label: "HTML" }, // code 元素的 class 属性值为 language-html
        { language: "javascript", label: "JavaScript", class: "js-code" }, // code 元素的 class 属性值为 js-code
        { language: "java", label: "Java", class: "js-code" }, // code 元素的 class 属性值为 js-code
      ],
    },

    image: {
      toolbar: [
        "link", // 图像链接
        "imageTextAlternative", // 文本替换图像
        "toggleImageCaption", // 显示或隐藏图像标题
        "resizeImage", // 调整图像尺寸选项
        "|",
        "resizeImage:original", // 原始尺寸
        "resizeImage:25", // 25%
        "resizeImage:50", // 50%
        "resizeImage:75", // 75%
      ],
    },
    heading: {
      options: [
        {
          model: "paragraph",
          title: "Paragraph",
          class: "ck-heading_paragraph",
        },
        {
          model: "heading1",
          view: "h1",
          title: "Heading 1",
          class: "ck-heading_heading1",
        },
        {
          model: "heading2",
          view: "h2",
          title: "Heading 2",
          class: "ck-heading_heading2",
        },
        {
          model: "heading3",
          view: "h3",
          title: "Heading 3",
          class: "ck-heading_heading3",
        },
        {
          model: "heading4",
          view: "h4",
          title: "Heading 4",
          class: "ck-heading_heading4",
        },
        {
          model: "heading5",
          view: "h5",
          title: "Heading 5",
          class: "ck-heading_heading5",
        },
        {
          model: "heading6",
          view: "h6",
          title: "Heading 6",
          class: "ck-heading_heading6",
        },
      ],
    },
    toolbar: [
      // "heading",
      "undo", // 撤消
      "redo", // 重做
      "|",
      "paragraph",
      "heading1",
      "heading2",
      "heading3",
      // "heading4",
      // "heading5",
      // "heading6",
      "|",
      "selectAll", // 全选
      "bold", // 加粗
      "italic", // 斜体
      "fontSize",
      "fontFamily",
      "fontColor",
      "fontBackgroundColor",
      "outdent", // 减少缩进
      "indent", // 增加缩进
      "strikethrough", // 删除线
      "underline", // 下划线
      "code", // 行内代码
      "link", // 链接
      "uploadImage", // 上传图像
      "insertImage", // 插入图像

      "codeblock", // 代码块
      "findandreplace", // 查找替换
    ],
    simpleUpload: {
      // 要请求上传富文本编辑器插入图片出的接口的url
      uploadUrl: `${URL()}`+"/photo/addartPhoto",

      // headers: {
      //   // "X-CSRF-TOKEN": "CSRF-Token",
      //   // Authorization: "Bearer <JSON Web Token>",
      // },
    },
  },
});
const { editor, editorData, editorConfig, input, input1 } = toRefs(data);
const handleSend = () => {
  if (props.btn === "发表文章") {
    axios
      .post(URL()+"/article/addArticle", {
        title: data.input,
        content: data.editorData,
        classify: data.input1,
      })
      .then((item) => {
        // console.log(item.data);
        if (item.data.code === 20000) {
          ElMessage({
            message: item.data.message,
            type: "success",
          });
          data.input = "";
          data.input1 = "";
          data.editorData = "";
          check()
        }
      });
  } else if (props.btn === "修改文章") {
    console.log(1 + "修改文章");
    axios
      .post(URL()+"/article/updateArticle", {
        ud_id:props.Info._id,
        title: data.input,
        content: data.editorData,
        classify: data.input1,
      })
      .then((item) => {
        // console.log(item.data);
        if (item.data.code === 20000) {
          ElMessage({
            message: item.data.message,
            type: "success",
          });
          data.input = "";
          data.input1 = "";
          data.editorData = "";
          check()
        }
      });
  }
};
</script>

<style lang="scss" scoped>
.editor {
  margin: 0 auto;
  color: var(--el-text-color-primary);
  width: min(608px, 100%);
  // box-sizing: border-box;
  .SSR {
    background-color: #fff;
    border-radius: 2px;
  }
  .btn {
    width: 100%;
    display: flex;
    margin: 10px;
    align-items: center;
    justify-content: center;
  }
  .title {
    margin: 10px auto;
    .el-input{
      margin-top: 10px;
    }
  }
}
</style>

<style>
.ck-content {
  color: #000;
}
.ck-content h1 {
  border-bottom: 1px solid black;
}
</style>